import api from "@/api";

const SEARCH_KEY = "search.key" 
let searchPage = {
	init:function () {
		this.showSearchHistory()
		this.bindEvent();
	},
	showSearchHistory:function () {
		let list = zrzb.storage.get(SEARCH_KEY);
		if(!list){
			return
		}
		let historyHtml = list.map((item) => {
			return ` 
				<li data-keyword="${item}"> 
					<i class="clock-icon" data-keyword="${item}"></i> 
					<span class="text" data-keyword="${item}">${item}</span>
				</li>
			`
		})
		$(".history-ul").html(historyHtml);
		$(".history-wrap").show()
		
	},
	bindEvent:function () {
		$(".search-input").on("input",this.onInput.bind(this))
		//搜索
		$("#search-form").submit(this.search.bind(this));
		//删除搜索
		$(".search-bar-cancel-icon").click(this.clearSearch.bind(this));
		//删除搜索历史
		$(".history-wrap .delete-icon").click(this.clearHistorySearch.bind(this));

		$(".history-ul").click(this.clickHistoryTag.bind(this))
	},
	clickHistoryTag:function (e) {
		let keyword = $(e.target).data("keyword");
		let searchInput = $(".search-input");
		searchInput.val(keyword)
		$(".search-bar-cancel-icon").addClass("show");
		$("#search-form").submit()

	},
	clearHistorySearch:function () {
		zrzb.storage.del(SEARCH_KEY);
		$(".history-wrap").hide()
	},
	clearSearch:function () {
		$(".search-input").val("");
		$(".search-result-pannel").hide()
		$(".search-result-pannel .course-ul").html("");
		$(".result-label .highlight").text(0);
		$(".search-pannel").show();
		$(".search-bar-cancel-icon").removeClass("show");
		this.showSearchHistory()
	},
	onInput:function (e) {
		let val = $(e.target).val()
		if(val){
			$(".search-bar-cancel-icon").addClass("show");
		}else{
			$(".search-bar-cancel-icon").removeClass("show");
			this.clearSearch()
		}
	},
	search:async function (e) {
		e.preventDefault()
		let keyword = $(".search-input").val();
		if(!keyword){
			return
		}
		let list = zrzb.storage.get(SEARCH_KEY)
		if(!list){
			list = [keyword]
		}else{
			list.push(keyword)
		}
		list = Array.from(new Set(list))
		if(list.length > 10){
			list.shift()
		}
		zrzb.storage.set(SEARCH_KEY,list)
		
		let result = await api("/courses/getByKey",{keyword})
		if(result.errorCode != 0){
			alertTips.toast(result.errorMessage);
			return
		}
		this.appendSearchResult(result.rows)
	},
	appendSearchResult:function (data) {
		let keyword = $(".search-input").val();

		let searchResultPannel = $(".search-result-pannel"),
			courseUl = searchResultPannel.find(".course-ul"),
			html = "";
		$(".result-label .highlight").text(data.length);
		html = data.map((item,index) => {

			if(item.type == "COURSE"){
				let tag = "";
				if(item.courseType == "AUDIO"){
					tag = `<span class="tag">音频</span>`
				}
				if(item.courseType == "VIDEO"){
					tag = `<span class="tag video">视频</span>`
				}
				return ` 
					<a class="mode-card" href="/course/detail?id=${item.id}">
						<div class="course-li">
							<div class="cover">
								<img src="${item.pictureUrl}" alt="">
							</div>
							<div class="course-info">
								<div class="name">
									<h3 class="text medium">${this.highlight(item.courseName)}</h3>
									${tag}
								</div>
								<div class="summary">${this.highlight(item.description)}</div>
								<div class="fee-info">
									<span class="fee medium">${item.totalLessons}节/<span class="del">￥${item.price}</span> 
									<span class="mark">${item.discountPrice == 0 ? "免费":"￥"+item.discountPrice}</span></span>
									<span class="text">共${item.listenCount}人加入</span>
								</div>
							</div>
						</div>
					</a>
				`
			}
			return ` 
				<a class="mode-text" href="/course/classperiod/detail?id=${item.lessonId}">
					<div class="title">${this.highlight(item.lessonName)}| ${this.highlight(item.courseName)}</div>
					<div class="content">
						<div class="content-text">
							${this.highlight(item.description)}
						</div>
						
					</div>
					<div class="time">${zrzb.audio.duration(item.lessonTime,"mm分ss秒")}</div>
				</a>

			`
		})

		courseUl.html(html);
		$(".search-pannel").hide()
		searchResultPannel.show()

	},
	highlight :function (str) {
		let keyword = $(".search-input").val();
		return str.replace(new RegExp(keyword,"g"),`<span class="highlight">${keyword}</span>`)
	}
}



searchPage.init()